<template>
  <div class="page-container">
    <div class="page-content">
      <div class="panel-container">
        暂未开启
        <!-- <div style="margin: 20px 0; font-size: 16px">状态：{{ status }}</div>
        <div style="margin: 20px 0; font-size: 16px">信息：{{ message }}</div>
        <div class="panel-line" style="margin-bottom: 20px">
          <el-input size="mini" v-model="exten" style="width: 200px; margin-right: 20px" />
          <el-button :disabled="disabled.login" size="mini" type="primary" @click="handleLogin">签入</el-button>
          <el-button :disabled="disabled.logout" size="mini" type="primary" @click="handleLogout">签出</el-button>
        </div>
        <div class="panel-line">
          <el-button :disabled="disabled.call" size="mini" type="primary" @click="handleCall">外呼</el-button>
          <el-button :disabled="disabled.switch" size="mini" type="warning" @click="handleSwitch">转接</el-button>
          <el-button :disabled="disabled.hangUp" size="mini" type="danger" @click="handleHangUp">挂机</el-button>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AssetsPush',
  data() {
    return {
      status: '未初始化',
      message: '',
      exten: '',
      disabled: {
        login: false,
        logout: true,
        call: true,
        switch: true,
        hangUp: true,
      },
      socket: null,
      queue: {
        name: '',
        status: '',
      },
      channel: '',
    }
  },
  mounted() {
    // this.init()
  },
  destroyed() {},
  methods: {
    // 初始化
    init() {
      // 10.10.10.2 正式环境
      // 10.10.10.12 测试环境
      loadScript('https://unpkg.com/element-ui/lib/index.js').then(() => {
        this.socket = io.connect('http://10.10.10.12:13001')
        socket.on('login_sip/' + this.exten, this.onMessage)
      })
    },
    // 签入
    handleLogin() {
      socket.emit('login', { username: this.exten })
    },
    // 签出
    handleLogout() {},
    // 外呼
    handleCall() {
      // 1、分机号码 ，这里的EXTEN是坐席的分机号码。
      // 2、被叫号码，这里的9是外呼前缀，目前测试系统的固定的，后面的cusmobile是客户手机号码。
      // 3、主叫号码，这个cuscallee是主叫号码。是外显示号码。
      socket.emit('callout', { Channel: 'SIP/' + $('#exten').val(), Exten: '9' + $('#cusmobile').val(), Priority: 1, Context: 'from-internal', Timeout: 30000, CallerID: $('#cuscallee').val(), Async: 'true' })
    },
    // 转接
    handleSwitch() {
      // 1、源通道，呼入电话的源通道
      // 2、目标分机，转接的分机号码
      socket.emit('mttranfer', { channel: $('#channel').text(), exten: $('#tranferexten').val(), context: 'from-internal' })
    },
    // 挂机
    handleHangUp() {
      // 1、通道，这里设置接通电话的源通道或目标通道。
      socket.emit('mthangup', { channel: $('#channel').text() })
    },
    // 呼入
    onMessage(data) {
      if (data.type === 1) {
        // 呼叫来电弹屏信息
        this.message = '来电' + data.caller
      } else if (data.type === 2) {
        // 返回分机状态
        /**分机状态
          -1 = Extension not found
          0 = Idle
          1 = In Use
          2 = Busy
          4 = Unavailable
          8 = Ringing
          16 = On Hold
          **/
        if (data.status == '-1') {
          this.message = '无效分机'
        } else if (data.status == '0') {
          this.message = '空闲'
          this.disabled.call = false
          this.disabled.hangUp = true
        } else if (data.status == '1') {
          this.message = '使用'
          $('#savebtn').removeAttr('disabled')
          $('#hangupbtn').removeAttr('disabled')
          $('#callbtn').attr('disabled', 'true')
        } else if (data.status == '2') {
          this.message = '忙'
        } else if (data.status == '4') {
          this.message = '注册失败'
        } else if (data.status == '8') {
          this.message = '振铃'
        } else if (data.status == '16') {
          this.message = '等待'
        }
      } else if (data.type === 3) {
        // 队列状态
        if (data.status == '0') {
          this.queue.status = '正常'
        } else if (data.status == '1') {
          this.queue.status = '暂停'
        }
      } else if (data.type === 4) {
        // 队列状态
        if (data.status == '99') {
          this.queue.name = '未知'
          $('#queuestatus').html('未知')
        } else {
          this.queue.name = data.queue
          if (data.pause == '0') {
            this.queue.status = '正常'
          } else if (data.pause == '1') {
            this.queue.status = '暂停'
          }
        }
      } else if (data.type === 5) {
        // 呼入呼出状态
        this.channel = data.channel
        if (data.callstatus == 0) {
          $('#callstatus').html('呼入')
          $('#cusmobile').val(data.caller)
        } else if (data.callstatus == 1) {
          $('#callstatus').html('呼出')
        }
      }
    },
    // 加载js
    loadScript(url) {
      return new Promise((resolve, reject) => {
        var script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = url
        document.head.appendChild(script)
        script.onload = () => {
          resolve()
        }
        script.onerror = () => {
          reject()
        }
      })
    },
    a() {
      socket.on('login_sip/' + $('#exten').val(), function (data) {
        if (data.type == 1) {
          //呼叫来电弹屏信息
          $('#cusmobile').val(data.caller)
          $('#savebtn').removeAttr('disabled')
          $('#sub').css('display', 'none')
        } else if (data.type == 2) {
          //返回分机状态
          /**分机状态
          -1 = Extension not found
          0 = Idle
          1 = In Use
          2 = Busy
          4 = Unavailable
          8 = Ringing
          16 = On Hold
          **/
          if (data.status == '-1') {
            context = '无效分机'
          } else if (data.status == '0') {
            context = '空闲'
            $('#callbtn').removeAttr('disabled')
            $('#hangupbtn').attr('disabled', 'true')
            $('#channel').html('')
            $('#dstchannel').html('')
            $('#callstatus').html('')
          } else if (data.status == '1') {
            context = '使用'
            $('#savebtn').removeAttr('disabled')
            $('#hangupbtn').removeAttr('disabled')
            $('#callbtn').attr('disabled', 'true')
          } else if (data.status == '2') {
            context = '忙'
          } else if (data.status == '4') {
            context = '注册失败'
          } else if (data.status == '8') {
            context = '振铃'
          } else if (data.status == '16') {
            context = '等待'
          }
          $('#status').html(context)
        } else if (data.type == 3) {
          //队列状态
          if (data.status == '0') {
            queuecontext = '正常'
          } else if (data.status == '1') {
            queuecontext = '暂停'
          }
          $('#queuestatus').html(queuecontext)
        } else if (data.type == 4) {
          //队列状态
          if (data.status == '99') {
            queuename = '未知'
            $('#queuestatus').html('未知')
          } else {
            queuename = data.queue
            if (data.pause == '0') {
              queuecontext = '正常'
            } else if (data.pause == '1') {
              queuecontext = '暂停'
            }
            $('#queuestatus').html(queuecontext)
          }
          $('#queuename').html(queuename)
        } else if (data.type == 5) {
          //呼入呼出状态
          $('#channel').html(data.channel)
          $('#dstchannel').html(data.dstchannel)
          if (data.callstatus == 0) {
            $('#callstatus').html('呼入')
            $('#cusmobile').val(data.caller) //来电弹屏号码，是在data.caller参数里面
          } else if (data.callstatus == 1) {
            $('#callstatus').html('呼出')
          }
        }
      })
      socket.emit('extenstate', { exten: $('#exten').val(), context: 'default' })
    },
  },
}
</script>

<style scoped lang="scss"></style>
